<template>
    <view class="info-card" @click="toWish(data)">
        <view class="info-card_item">
            <view class="info-card_item__bg">
                <!--<text v-if="position == 'wish'" class="status status-fail">未通过</text>-->
                <view v-if="(position == 'home' || position == 'cate') && data.wantWish == 1" class="card-hot">
                    <img class="icon" src="@/assets/images/heart.png" alt="">
                    <text>重点推荐</text>
                </view>
                <img style="width: 100%;height: 100%;" :src="data.imgList.length > 0 ? data.imgList[0].picPath : ''" alt="">
            </view>
            <view class="info-card_item__content">
                <text v-if="position == 'wish'" class="title">{{ data.inputNameContent }}</text>
                <text v-if="position == 'home' || position == 'cate'" class="title">{{ data.inputNameContent }}</text>
                <view v-if="position == 'home' || position == 'cate'" class="user">
                    <wish-ava size="small"></wish-ava>
                    <view>
                        <text class="user-name">{{ data.createName }}</text>
                        <text class="user-time">{{ data.createdOn ?  parseTime(data.createdOn,"{m}-{d}")  +`发出心愿` : '' }}</text>
                    </view>
                </view>

                <view v-if="position == 'wish'" clas="diff"
                    style="display: flex;justify-content: space-between;align-items: center;">
                    <text class="diff-price">还需<text class="price">{{ data.inputMoneyContent }}</text>元</text>
                    <img style="width: 30rpx;height: 30rpx;position: relative;top: 4rpx;" src="@/assets/images/edit.png"
                        alt="">
                </view>

                <view v-if="position == 'wish' && data.status == 0" class="fail-message" style="margin-top: 26rpx;    display: flex;">
                    <img style="width: 30rpx;height: 30rpx" src="@/assets/images/tanhao.png" alt="">
                    <text class="fail-message_text">{{ data.refuseReason }}</text>
                </view>

                <view class="wish-status" v-if="position == 'cate' || position == 'wish' && data.status == 2">
                    <!-- <view  v-if="position == 'wish'" class="wish-success">
                        <img class="icon" src="@/assets/images/heart.png" alt="">
                        <text>心愿成功</text>
                    </view> -->
                    <view v-if="position == 'wish' && data.status == 2" class="wish-wait">
                        <view class="wait share">立即分享</view>
                        <view class="wait hot">获得推荐</view>
                    </view>

                    <view v-if="position == 'cate'" class="wish-call">
                        <text>立即助力</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted } from 'vue';
import WishAva from '@/components/WishAva.vue'

defineProps<{ position: String, data: any }>();

function toWish(data) {
    uni.navigateTo({
        url: `/pages/wish/index?id=${data.id}`
    })
}

function parseTime(time, cFormat) {
    if (arguments.length === 0) {
        return null
    }
    const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
    let date
    if (typeof time === 'object') {
        date = time
    } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
            time = parseInt(time)
        }
        if ((typeof time === 'number') && (time.toString().length === 10)) {
            time = time * 1000
        }
        date = new Date(time)
    }
    const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
    }
    const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
        const value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
        return value.toString().padStart(2, '0')
    })
    return time_str
}

</script>

<style lang="scss" scoped>
.info-card_item {
    border-radius: 20rpx;
    background: #fff;
    width: 330rpx;

    .info-card_item__bg {
        width: 330rpx;
        height: 330rpx;
        position: relative;

        .card-hot {
            width: 140rpx;
            height: 45rpx;
            line-height: 45rpx;
            font-size: 22rpx;
            text-align: center;
            color: #FFFFFF;
            display: flex;
            position: absolute;
            justify-content: center;
            align-items: center;
            background: rgba(214, 99, 85, 0.6);
            border: 0.6rpx solid #F76464;
            border-radius: 77rpx;
            font-family: PingFangSC-Regular-Regular;
            right: 12rpx;
            top: 12rpx;

            .icon {
                width: 20rpx;
                height: 20rpx;
                margin-right: 4rpx;
            }
        }

        .status {
            position: absolute;
            top: 0;
            height: 35rpx;
            color: #fff;
        }

        .status-push {
            background-color: #26DE9E;
        }

        .status-wait {
            background-color: #FD6510;
        }

        .status-fail {
            background-color: #FB4D4F;
        }

        img {
            border-top-right-radius: 20rpx;
            border-top-left-radius: 20rpx;
        }
    }

    .info-card_item__content {
        min-height: 150rpx;
        padding: 10rpx 16rpx;
        font-family: PingFangSC-Regular-Regular;
        padding-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

        .fail-message_text {
            color: #FA743A;
            font-size: 22rpx;
            margin-left: 5rpx;
            white-space: nowrap;
            overflow: hidden;
            width: 100%;
            text-overflow: ellipsis;
        }

        .title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            width: 100%;
            text-overflow: ellipsis;
        }

        .hot-title {
            width: 100%;
            height: 50rpx;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .user {
            display: flex;
            align-items: center;
            margin-top: 16rpx;
            height: 50rpx;

            .user-name {
                color: #666;
                font-size: 26rpx;
                margin-left: 14rpx;
            }

            .user-time {
                color: #999999;
                font-size: 20rpx;
                display: block;
                margin-left: 12rpx;
            }
        }

        .diff-price {
            display: block;
            color: #999999;
            font-size: 26rpx;

            .price {
                color: #FF544F;
                font-size: 36rpx;
                margin: 0 5rpx;
            }
        }

        .wish-status {
            margin-top: 16rpx;

            .wish-success {
                width: 200rpx;
                height: 60rpx;
                border-radius: 72rpx;
                border: 2rpx solid #FF544F;
                color: #FF544F;
                font-size: 26rpx;
                line-height: 60rpx;
                text-align: center;
                margin: auto;

                .icon {
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 5rpx;
                    vertical-align: text-bottom;
                }
            }

            .wish-wait {
                display: flex;
                width: 280rpx;
                height: 60rpx;
                line-height: 60rpx;
                border-radius: 72rpx;
                border: 2rpx solid #FF544F;
                justify-content: center;
                margin: auto;

                .wait {
                    color: #FF544F;
                    font-size: 24rpx;
                    width: 50%;
                    text-align: center;
                }

                .hot {
                    color: #fff;
                    background: #FF544F;
                    border-top-right-radius: 72rpx;
                    border-bottom-right-radius: 72rpx;
                }
            }

            .wish-call {
                width: 175rpx;
                height: 65rpx;
                text-align: center;
                line-height: 65rpx;
                background: #FF544F;
                border-radius: 72rpx;
                font-size: 24rpx;
                color: #fff;
                margin: auto;
            }
        }
    }
}
</style>